<template>
  <div class="bg-white rounded-lg shadow-lg mb-6">
    <nav class="flex flex-wrap border-b border-gray-200 overflow-x-auto">
      <button 
        v-for="tab in tabs" 
        :key="tab.id" 
        @click="$emit('update:activeTab', tab.id)" 
        :class="[
          'flex-1 min-w-0 py-3 px-2 sm:py-4 sm:px-4 md:px-6 text-center font-medium transition-colors duration-200 text-sm sm:text-base whitespace-nowrap',
          activeTab === tab.id
            ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
            : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
        ]"
      >
        <span class="block sm:hidden">{{ tab.name.length > 4 ? tab.name.substring(0, 4) + '...' : tab.name }}</span>
        <span class="hidden sm:block">{{ tab.name }}</span>
      </button>
    </nav>
  </div>
</template>

<script setup>
defineProps({
  tabs: {
    type: Array,
    required: true
  },
  activeTab: {
    type: String,
    required: true
  }
})

defineEmits(['update:activeTab'])
</script>